import { Component, OnInit } from '@angular/core';
import { EChartOption } from 'echarts';
import * as moment from 'moment';

@Component({
  selector: 'app-dashboard-echarts',
  templateUrl: './dashboard-echarts.component.html',
  styleUrls: ['./dashboard-echarts.component.css'],
})
export class DashboardEchartsComponent implements OnInit {
  // 图表选项
  chartOption: EChartOption;

  constructor() {}

  ngOnInit(): void {
    this.onClickCumulativeUsers();
  }

  /**
   * 生成 chart 选项
   * @param title 标题
   * @param xAxisData 横轴数据
   * @param seriesData 系列数据
   */
  eChartOption(title: string, xAxisData: string[], seriesData: number[]) {
    return {
      title: {
        text: title,
      },
      tooltip: {},
      xAxis: {
        data: xAxisData,
      },
      yAxis: {},
      series: [
        {
          type: 'line',
          data: seriesData,
        },
      ],
    } as EChartOption;
  }

  /**
   * 生成横轴30天的数据
   */
  generateXAxisData30Days() {
    const xAxisData: string[] = [];

    // 取得今天
    const now = moment();

    // 递减30次，并存储
    for (let i = 0; i < 30; i++) {
      xAxisData.push(now.format('MM月DD日'));
      now.subtract('1', 'days');
    }

    return xAxisData.reverse();
  }

  /**
   * 生成30天的测试数据
   */
  generateTestData30Days() {
    const testData: number[] = [];

    const getRandomIntInclusive = (min: number, max: number) => {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; // 含最大值，含最小值
    };

    for (let i = 0; i < 30; i++) {
      testData.push(getRandomIntInclusive(0, 100));
    }

    return testData;
  }

  /**
   * 单击累计用户
   */
  onClickCumulativeUsers() {
    this.chartOption = this.eChartOption(
      '累计用户',
      this.generateXAxisData30Days(),
      this.generateTestData30Days()
    );
  }

  /**
   * 单击今日新增用户
   */
  onClickTodayNewUsers() {
    this.chartOption = this.eChartOption(
      '今日新增用户',
      this.generateXAxisData30Days(),
      this.generateTestData30Days()
    );
  }

  /**
   * 单击累计订单
   */
  onClickCumulativeOrders() {
    this.chartOption = this.eChartOption(
      '累计订单',
      this.generateXAxisData30Days(),
      this.generateTestData30Days()
    );
  }

  /**
   * 单击今日新增订单
   */
  onClickTodayNewOrders() {
    this.chartOption = this.eChartOption(
      '今日新增订单',
      this.generateXAxisData30Days(),
      this.generateTestData30Days()
    );
  }

  /**
   * 单击累计营业额
   */
  onClickCumulativeTurnover() {
    this.chartOption = this.eChartOption(
      '累计营业额',
      this.generateXAxisData30Days(),
      this.generateTestData30Days()
    );
  }

  /**
   * 单击今日营业额
   */
  onClickTodayNewTurnover() {
    this.chartOption = this.eChartOption(
      '今日营业额',
      this.generateXAxisData30Days(),
      this.generateTestData30Days()
    );
  }
}
